<template>
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
        @close="handleClose" style="height: 100vh;overflow-x:hidden;background-color: rgb(240,240,240);" router="true">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :label="false" v-show="isCollapse">展开</el-radio-button>
            <el-radio-button :label="true" v-show="!isCollapse" style="width: auto;">收起</el-radio-button>
        </el-radio-group>
        <!-- <el-menu-item index="/adminHome/" style="background-color: rgb(240,240,240);">
            <i class="iconfont icon-zhuye"></i>
            <template #title>后台首页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</template>
        </el-menu-item> -->
        <el-menu-item index="/homeSetting/" style="background-color: rgb(240,240,240);" v-if="$store.state.admin.role == '超级管理员' ">
            <i class="iconfont icon-icon-test"></i>
            <template #title>首页管理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</template>
        </el-menu-item>
        <el-menu-item index="/adminManage/" v-if="$store.state.admin.role == '超级管理员' ">
            <i class="iconfont icon-geren"></i>
            <template #title>管理员审核<i class="iconfont icon-guanliyuan"></i></template>
        </el-menu-item>
        <el-menu-item index="/checkArticle/" v-if="$store.state.admin.role == '超级管理员' ">
            <i class="iconfont icon-wenzhang"></i>
            <template #title>文章审核</template>
        </el-menu-item>
        <el-menu-item index="/checkHistory/" v-if="$store.state.admin.role == '超级管理员' ">
            <i class="iconfont icon-lishi"></i>
            <template #title>文章审核历史</template>
        </el-menu-item>
        <el-menu-item index="/article/upload/">
            <i class="iconfont icon-fabuketang"></i>
            <template #title>文章发布</template>
        </el-menu-item>
        <el-sub-menu index="1">
            <template #title>
                <i class="iconfont icon-anquan"></i>
                <span>管理员详情</span>
            </template>
            <el-menu-item index="/myArticle/">我的已审核文章</el-menu-item>
            <el-menu-item index="/adminUnCheck/">我的未审核文章</el-menu-item>
            <el-menu-item index="/">返回首页</el-menu-item>
            <el-menu-item @click="logout" index="/">注销</el-menu-item>
            
        </el-sub-menu>
    </el-menu>
</template>

<script>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';

export default {
    name: "navComponents",

    setup() {
        const isCollapse = ref(false);
        const route = useRoute();
        const store = useStore();

        let logout = () => {
            store.dispatch("logout",);
        }
        return {
            logout,
            route,
            isCollapse,
        }
    }
}

</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>